<template>
  <div
    class="flights"
    v-if="flightInfo"
  >
    <!-- 左侧 主要内容 -->
    <div class="flights_main">
      <!-- 筛选组件 -->
      <FlightFilter
        @filterValueChange="filterValueChange"
        :filterInfo="flightInfo.info"
        :filterOptions="flightInfo.options"
      />
      <!-- 列表组件 -->
      <FlightList :flightList="pageList" />
      <!-- 分页组件 -->
      <el-pagination
        @size-change="sizChange"
        @current-change="currentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :layout="layout"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 右侧  其他信息-->
    <div class="flights_aside">
      <div class="ensure">
        <div class="ensuer_content">
          <div class="ensure_item">
            <i class="iconfont iconweibiaoti-_huabanfuben"></i>
            <span>航协认证</span>
          </div>
          <div class="ensure_item">
            <i class="iconfont iconbaozheng"></i>
            <span>出行保证</span>
          </div>
          <div class="ensure_item">
            <i class="iconfont icondianhua"></i>
            <span>7*24</span>
          </div>
        </div>
        <div class="ensure_contact">免费客服电话：4006345678转2</div>
      </div>
      <!-- 历史 -->
      <div class="history">
        <div class="history_title">历史查询</div>
        <div class="history_content">
          <div
            class="history_item"
            v-for="(item,index) in history"
            :key="index"
          >
            <div class="history_info">
              <div>{{item.departCity}} - {{item.destCity}}</div>
              <div>{{item.departDate}}</div>
            </div>
            <div
              class="history_btn"
              @click="searchHis(item)"
            >选择</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* 
1 前端分页
  1 总的数据 23条
  2 页容量   5条
  3 页码   1页 
  4 例子
    1 [1,2,3,4,5]    
      获取第一页数据  
      1 开始的条数:(当前页码-1) * 页容量    (1-1)*5,   0
      2 结束的条数  当前页码 * 页容量       1 * 5 =   5
    2 [6,7,8,9,10]
      1          开始的条数 :   (2-1)*5   =  5 
      2          结束的条数 :   2 * 5 =      10
    3 [11,12,13,14,15]
    4 ...
  5 数组如何方便的根据 开始的条数和结束的条数去 分拆 
 */

import { mapState } from "vuex";

export default {
  computed: {
    ...mapState("air", ["history"]),
  },

  data() {
    return {
      // 机票数据返回值 大对象
      flightInfo: null,
      // 分页后的数组
      pageList: [],
      // 当前显示的页码
      currentPage: 1,
      // 页容量选择数组
      pageSizes: [5, 10, 20, 50, 100],
      // 当前的页容量
      pageSize: 5,
      layout: "total, sizes, prev, pager, next, jumper",
      total: 0,
      // 用户筛选的条件的值  ["白云机场","3|6","东航","大"]
      filterValues: ["", "", "", ""],
    };
  },
  mounted() {
    this.flightInit();
  },
  watch: {
    "$route.fullPath": function () {
      this.flightInit();
    },
  },
  methods: {
    async flightInit() {
      const res = await this.$axios.get("/airs", { params: this.$route.query });
      this.flightInfo = res;
      this.handlePageList();
    },

    // 对数组做分页处理
    handlePageList() {
      // 就是筛选后的数组
      const list = this.flightInfo.flights.filter((flight) => {
        // 起飞机场的筛选
        const airportValid =
          this.filterValues[0] === "" ||
          this.filterValues[0] === flight.org_airport_name;

        // this.filterValues[1] =  12|13
        let timeValid = this.filterValues[1] === "";
        if (!timeValid) {
          // 万一用户选过时间筛选  this.filterValues[1]=12|13
          // 转为分钟数 来比较大小
          // 开始的总分钟数
          const startMinutes = this.filterValues[1].split("|")[0] * 60;
          // 结束的总分钟数
          const endMinutes = this.filterValues[1].split("|")[1] * 60;

          // 循环项机票中的总分钟数
          const minutes =
            flight.dep_time.split(":")[0] * 60 + +flight.dep_time.split(":")[1];

          // 判断看时间是否满足要求
          timeValid = minutes >= startMinutes && minutes <= endMinutes;
        }

        // 是否满足 航空公司 筛选条件  当 选中的值为空字符串的时候 那么是不用做筛选 =>直接返回true
        const companyValid =
          this.filterValues[2] === "" ||
          flight.airline_name === this.filterValues[2];

        // 机型大小的筛选
        const planeSizeValid =
          this.filterValues[3] === "" ||
          this.filterValues[3] === flight.plane_size;

        return companyValid && airportValid && planeSizeValid && timeValid;
      });

      // 开始的条数
      const start = (this.currentPage - 1) * this.pageSize;
      // 结束的条数
      const end = this.currentPage * this.pageSize;

      // 对数组做分页处理  拿筛选后数组做分页
      this.pageList = list.slice(start, end);
      this.total = list.length;
    },

    // 页容量大小改变事件
    sizChange(size) {
      // 修改后的页容量的值
      this.pageSize = size;
      // 重新分页
      this.handlePageList();
    },
    // 当前页码值改变事件
    currentChange(currentPage) {
      this.currentPage = currentPage;
      // 重新分页
      this.handlePageList();
    },
    // 接收筛选组件传递过来的值
    filterValueChange(filterValues) {
      // filterValues= ["白云机场","3|6","东航","中"]
      /* 
      思考 如何实现 数据过滤 筛选  
      1  先筛选再分页 
         针对数据做筛选处理 
         总数据   this.flightInfo.flights
         筛选条件 [] || ["白云机场","东航"...]
       */

      // this.flightInfo.flights  filterValues
      // 筛选后的值

      this.filterValues = filterValues;
      this.currentPage = 1;
      this.handlePageList();
    },

    // 点击右侧历史记录
    searchHis(item) {
      // console.log(this.$route);
      // console.log(item);
      /* 
      现象:
      1 路由的切换 肯定是生效了 因为 浏览器上的url 已经发生变化!!! 
      2 但是页面的数据却没有发生变化 
      3 当前url发生变化 只是参数发生变化而已 而页面没有发生变化!!!! 
        1 不会重新触发 mounted!! 
      4 不管 就需要它的参数改变 重新发送请求获取新的数据
        1 

       */
      this.$router.push({ path: "/air/flights", query: item });
    },
  },
};
</script>

<style lang="less" scoped>
.flights {
  width: 1000px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  .flights_main {
    width: 740px;
  }
  .flights_aside {
    width: 240px;
    padding-top: 10px;
    .ensure {
      border: 1px solid #ccc;
      .ensuer_content {
        display: flex;
        height: 80px;
        .ensure_item {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          &:nth-child(2) {
            .iconfont {
              color: green;
            }
          }
          .iconfont {
            color: #409eff;
            font-size: 30px;
          }

          span {
            font-size: 13px;
          }
        }
      }

      .ensure_contact {
        background-color: #f6f6f6;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        font-size: 14px;
      }
    }
    .history {
      margin-top: 10px;
      border: 1px solid #ccc;
      .history_title {
        padding: 12px;
        font-size: 14px;
        border-bottom: 1px solid #ccc;
      }

      .history_content {
        .history_item {
          padding: 12px;
          display: flex;
          justify-content: space-between;
          height: 45px;
          align-items: center;
          .history_info {
            font-size: 18px;
            text-align: center;
            div:nth-child(1) {
            }
            div:nth-child(2) {
              color: #666;
              font-size: 12px;
            }
          }

          .history_btn {
            color: #fff;
            background-color: orange;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            width: 50px;
            height: 20px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>